<!doctype html>
<html lang="zh-CN">
<head>
  <!-- 必须的 meta 标签 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap 的 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

  <title>TodoWork!</title>
</head>
<body>
<div class="container-fluid">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="mainpage.html">题单</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="mainpage.html">题单<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="Submit.html">提交题目</a>
        </li>
          <li class="nav-item">
              <a class="nav-link" href="">英语四级听力练习(计划开发)</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="AboutMe.html">我的发布</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="Score.html">我的成绩</a>
          </li>
      </ul>
      <div class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2 searchText" type="search" placeholder="题号、科目" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0 search" type="submit">搜索</button>
      </div>
    </div>
  </nav>
    <div class="showDataArea">
        <table class="table" style="margin-top: 10px">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">题 目</th>
                <th scope="col">IIIIIIIIII发布人IIIIIIIIII</th>
            </tr>
            </thead>
            <tbody class="tbody">


            </tbody>

        </table>

    </div>
    <div id="state">

    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script>
    var DataList;
    var questionDetail;
    var currentPage = 0;
    var user = $.cookie('user')
    var flag = $.cookie('isLogin')

    if(!flag){
        alert(user + " 欢迎您 ")
        $.cookie('isLogin',true)
    }

    //初始化
    $(function (){
        loadData();
        DrawnDate();
    });

    //搜索
    $(".search").on("click",function () {
        let val = $(".searchText").val();

        var ival = parseInt(val);

        $(".tbody").empty()

        if(!isNaN(ival)) {
            searchNum(ival)
        }else{
            searchText(val)
        }
    })
    //按照题号搜索数据
    function searchNum(index) {

        $("#state").empty()
        if(index > DataList[0].length){

            $("#state").append("<h4 style=\"width: 100%;font-size: 12px;text-align: center;\">一共"+0+"条数据</h4>")
            return true;
        }
        var str = "      <tr>\n" +
            "              <th scope=\"row\">"+index+"</th>\n" +
            "              <td class=\"col\"><a class='linkquestion'>"+DataList[0][index-1]+"</a></td>\n" +
            "              <td class=\"col\"><a class='user'>"+DataList[1][index-1]+"</a></td>\n" +
            "            </tr>";
        $(".tbody").append(str);
    }

    function searchText(text) {
        var count = 0;

        for (var i = 0; i < DataList[0].length; i++) {
            if(DataList[0][i] === text){
                var str = "      <tr>\n" +
                    "              <th scope=\"row\">"+(i+1)+"</th>\n" +
                    "              <td class=\"col\"><a class='linkquestion'>"+DataList[0][i]+"</a></td>\n" +
                    "              <td class=\"col\"><a class='user'>"+DataList[1][i]+"</a></td>\n" +
                    "            </tr>";
                $(".tbody").append(str);
                count++;
            }
        }
        $("#state").empty()
        $("#state").append("<h4 style=\"width: 100%;font-size: 12px;text-align: center;\">一共"+count+"条数据</h4>")
    }
    //画数据
    function DrawnDate(){
        for (let i = 0; i < DataList[0].length; i++) {
            var str = "      <tr>\n" +
                "              <th scope=\"row\" class=\"index\">"+(i+1)+"</th>\n" +
                "              <td class=\"col\"><a class='linkquestion'>"+DataList[0][i]+"</a></td>\n" +
                "              <td class=\"col \"><a class='user'>"+DataList[1][i]+"</a></td>\n" +
                "            </tr>";
            $(".tbody").append(str);
        }
    }

    //获取内容
    function loadData() {
        $.ajax({
            type: 'post',
            url: '/GetQuestionList',
            traditional: true,
            async: false,
            dataType: 'json',
            success: function(data) {
                DataList = data;
            },
            error: function(data) { //失败的事件
                sendMessage("错误","链接数据库是吧","danger")
            }
        });

    }

    //点击详情的连接
    $(".showDataArea").on("click",".linkquestion",function () {
        var temp = $(this).parent().parent().children(".index").html()
        var index = parseInt(temp)-1;
        var questionTitle = $(this).text();
        $.cookie('title',questionTitle);
        $.cookie('introduce','简介')
        $.cookie('code',DataList[2][index])
        window.location.href = 'Quation.html'

    });


    var m_clock = '';
    function sendMessage(tile,inner,state){

        $("#state").empty();
        var str = "<div style='margin-top: 50px' class=\"alert alert-"+state+" alert-dismissible rowmargin fade show\">" +
            "<button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>" +
            "<strong>"+tile+"</strong> "+inner+"!" +
            "</div>";
        $("#state").append(str);
        m_clock = setInterval(closeMessage,5000);
    }

    function closeMessage() {
        $("#state").empty();
        clearInterval(m_clock)
    }
</script>




</body>
</html>